import React, { useCallback } from 'react'
import { Image, Text, View } from '@tarojs/components'
import AssistantCard from '@COMPONENTS/Card/AssistantCard'
import EvaluationSubChoiceCard from '@COMPONENTS/Decision/EvaluationSubChoiceCard'
import ScaleCard from '@COMPONENTS/Decision/ScaleCard'
import { EvaluationChoiceITF } from '@INTERFACES/SmartAssistant'
import { LanguageType, StringMapAnyITF } from '@INTERFACES/Common'
import Images from '@ASSET/Images'
import { ChoiceITF } from '@INTERFACES/Survey'
import { QUESTION_STYLE_ENUM } from '@CONSTANTS/survey'
import style from './EvaluationChoiceCard.module.scss'

interface Props {
  evaluationData: EvaluationChoiceITF,
  isSurvey?: boolean,
  language: LanguageType,
  loading?: boolean,
  showChoice: boolean,
  onClickEvaluationChoiceItem: (choice: ChoiceITF)=>void
}

const QUESTION_STYLE_MAP :StringMapAnyITF = {
  [QUESTION_STYLE_ENUM.SingleChoice]: AssistantCard,
  [QUESTION_STYLE_ENUM.SingleSubChoice]: EvaluationSubChoiceCard,
  [QUESTION_STYLE_ENUM.GeneralScale]: ScaleCard,
  [QUESTION_STYLE_ENUM.PainScale]: ScaleCard,
}
const EvaluationChoiceCard: React.FC<Props> = ({
  evaluationData, language, onClickEvaluationChoiceItem, loading, showChoice, isSurvey = true
}) => {
  const { AnswerChoice, Choices, QuestionText, Question, QuestionStyle } = evaluationData || {} as EvaluationChoiceITF
  const renderItem = useCallback((item, index) => {
    const { Label, Text: content, NextNodeCode, Instruction } = item || {}
    const { Label: AnswerLabel, NextNodeCode: AnswerNextNodeCode } = AnswerChoice || {}
    const isSelect = NextNodeCode ? AnswerNextNodeCode === NextNodeCode : AnswerLabel === Label
    return (
      <View key={Label || NextNodeCode} className={style.choiceItem} onClick={() => onClickEvaluationChoiceItem?.(item)}>
        <Image
          src={isSelect ? Images.patient.decision_selected : Images.patient.decision_unselect}
          className={style.selectIcon}
        />
        <Text className={style.contentText}>
          {content?.[language] || Instruction?.[language]}
        </Text>
      </View>
    )
  }, [AnswerChoice, language, onClickEvaluationChoiceItem])
  const Comp = QUESTION_STYLE_MAP[QuestionStyle] || QUESTION_STYLE_MAP[QUESTION_STYLE_ENUM.SingleChoice]
  if (loading) {
    return (
      <View className={style.container}>
        <View className={`${style.headerContainer} ${style.loadingGifContainer}`}>
          <Image src={Images.patient.gif_loading_flow} className={style.loadingGif} />
        </View>
      </View>
    )
  }
  const title = QuestionText?.[language] || Question?.[language] || ''
  return (
    <View className={style.container}>
      {showChoice ? (
        <Comp
          answerChoice={AnswerChoice}
          onClickChoice={onClickEvaluationChoiceItem}
          contentClass={style.contentStyle}
          title={title}
          isHasBtn={false}
          data={Choices}
          renderItem={renderItem}
          questionStyle={QuestionStyle}
          language={language}
        />
      ) : (
        <View className={style.headerContainer}>
          <Text className={style.questionText}>
            {title}
          </Text>
        </View>
      )}
    </View>
  )
}

export default EvaluationChoiceCard
